import React from 'react'
import './Banner.scss'

class Banner extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            opacity:{opacity: .8}
        };
        this.adjust = this.adjust.bind(this);
    }
    componentDidMount(){
        window.addEventListener('scroll', this.adjust);
    }
    adjust(event) {
        // console.log(ev)
        // 滚动的高度
        const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)
            || window.pageYOffset
            || (event.srcElement ? event.srcElement.body.scrollTop : 0);
        // console.log(scrollTop)
        // style={opacity}

        if(scrollTop !== 0){
            
            this.setState({
                opacity:{opacity:1/(scrollTop/50),top:251}
            })
        }else{
            this.setState({
                opacity:{opacity:1,top:250}
            })
        }

        if(scrollTop>235){
            this.setState({
                opacity:{opacity:0}
            })
        }
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.adjust);
    }
    render() {
        return (
            <div className="container">
                <div className='content' style={this.state.opacity}>
                    <p className="title">插件收录库</p>
                    <div className="describe">
                        <span>for :</span>   
                        棚下懒猫
                        <p>把自己喜欢的小零件整理收录起来</p>
                    </div>
                </div>
            </div>
        )
    }
}
export default Banner